一樣是寫在style當中，和CSS一樣
@media screen and (min-width : 像素)若視窗寬度小於 X像素畫面則會變為
{
畫面則會變為怎樣的排版就寫在這裡
}
所以當葉面的像素小於768px，就會改變，程式碼就會長
@media screen and (min-width : 768px)若視窗寬度小於768px
{
畫面則會變為怎樣的排版就寫在這裡
}
那我們繼續下去
首先以上面的768px來看，要先了解到我們會有 大於768px(電腦) 和 小於768px(手機) 兩種都需要設定
假設今天要設定 class名為abc的 排版，我要讓他今天
使用電腦時呈現display:block;
使用手機時呈現display:flex;，要怎麼寫呢??
使用 @media 前的CSS
.abc{
display:block;
}
使用 @media 後的CSS
.abc{
display:flex;
}
@media screen and (min-width : 768px)若視窗寬度小於768px
{
.abc{
display:block;
}
}
有發現哪裡不一樣嗎??沒錯，在原本一開始的CSS從block變成flex了!!而在 @media 裡面的卻變為block。
在使用 @media 時，原先寫好的CSS是在使用手機時所呈現的，所以依照題目要求在手機要呈現flex
而在 @media 裡面所寫的才是使用電腦時所呈現出來的，所以依照題目要求在電腦要呈現block
那當然除了排版之外，背景顏色、字體大小等等也都可以做設定，大家可以玩玩看，
那我也附上簡單的程式碼，讓大家可以直接複製貼上直接改起來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 100%;
max-width: 1200px;
margin: auto;
justify-content: center;
}
h2{
font-size: 40px;
text-align: center;
margin: 10px;
}
.item{
background-color: #acc;
margin: 5px;
padding: 3px;
position: relative;
}
.item img{
width: 100%;
vertical-align: middle;
}
.text{
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
font-size: 40px;
color: aqua;
background-color: rgba(0,0,0,.5);
position: absolute;
text-align: center;
flex-direction: column;
justify-content: center;
transition: all .5s 0s ease;
opacity: 0;
}
.item:hover .text{
opacity: 1;
}
@media screen and (min-width:600px) {
.wrap{
display: flex; /*重點在這*/
}
}
</style>
</head>
<body>
<h2>@media運用part2</h2>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/400/400?random2">
<div class="text">
<h2>請點我</h2>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/400/400?random3">
<div class="text">
<h2>請點我</h2>
</div>
</div>
</div>
</body>
</html>
RWD是必備技能ㄚㄚㄚ!! 那我們鐵人賽Day17見囉!!
你好像說反了，應該是若視窗畫面小於 x 像素，則不執行這段 CSS 樣式
@media screen and (min-width : x 像素)
{
若視窗畫面小於 x 像素，則不執行這段 CSS 樣式
}
阿，感謝毛大
iThome鐵人賽
看影片追技術